<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>图书小类信息 - 依依图书 后台管理系统</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="依依图书,图书,管理,后台管理系统">
    <meta name="description" content="一个基于Bootstrap v3.3.7的后台管理系统的HTML">
    <meta name="author" content="wuyi">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/static/css/style.min.css" rel="stylesheet">
    <!--对话框-->
    <link rel="stylesheet" href="/static/js/jconfirm/jquery-confirm.min.css">
    <link href="/static/css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="/toPage?url=/yiyibook/manager/index_manager"><img src="/static/images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"> <a href="/toPage?url=/yiyibook/manager/index_manager"><i class="mdi mdi-home"></i> 后台首页</a> </li>
                        <li class="nav-item"> <a href="/toPage?url=/yiyibook/manager/member"><i class="mdi mdi-account"></i> 会员管理</a> </li>
                        <li class="nav-item nav-item-has-subnav active open">
                            <a href="javascript:void(0)"><i class="mdi mdi-format-list-bulleted"></i> 图书类型管理</a>
                            <ul class="nav nav-subnav">
                                <li><a href="/toPage?url=/yiyibook/manager/bookbigstyle">图书大类</a> </li>
                                <li class="active"><a href="/toPage?url=/yiyibook/manager/booksmallstyle">图书小类</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item"> <a href="/toPage?url=/yiyibook/manager/book"><i class="mdi mdi-library-books"></i> 图书管理</a> </li>
                        <li class="nav-item"> <a href="/toPage?url=/yiyibook/manager/order"><i class="mdi mdi-view-list"></i> 订单管理</a> </li>
                        <li class="nav-item"> <a href="/toPage?url=/yiyibook_templates/index"><i class="mdi mdi-clipboard-text"></i> 出库单管理</a> </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-palette"></i> UI 元素</a>
                            <ul class="nav nav-subnav">
                                <li class="active"> <a href="/toPage?url=/yiyibook_templates/lyear_ui_buttons">按钮</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_cards">卡片</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_grid">格栅</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_icons">图标</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_tables">表格</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_modals">模态框</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_tooltips_popover">提示 / 弹出框</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_alerts">警告框</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_pagination">分页</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_progress">进度条</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_tabs">标签页</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_typography">排版</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_step">步骤</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_other">其他</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> 表单</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_forms_elements">基本元素</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_forms_radio">单选框</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_forms_checkbox">复选框</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_forms_switch">开关</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i> 示例页面</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_doc">文档列表</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_gallery">图库列表</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_config">网站配置</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_rabc">设置权限</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_add_doc">新增文档</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_guide">表单向导</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_login">登录页面</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_error">错误页面</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> JS 插件</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_datepicker">日期选取器</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_sliders">滑块</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_colorpicker">选色器</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_chartjs">Chart.js</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_jconfirm">对话框</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_tags_input">标签插件</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_notify">通知消息</a> </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

                <div class="sidebar-footer">
                    <p class="copyright">Copyright &copy; 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 图书小类信息 </span>
                    </div>

                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-48 m-r-10" src="/static/images/users/avatar.jpg" alt="笔下光年" />
                                <span>笔下光年 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_profile"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_edit_pwd"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_login"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                        <li class="dropdown dropdown-skin">
                            <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
                            <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                                <li class="drop-title"><p>主题</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>LOGO</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                    <label for="logo_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>头部</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>侧边栏</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
                                </li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <form class="pull-right search-bar" method="get" action="javascript:void(0)" role="form">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <input type="hidden" name="search_field" id="search-field" value="title">
                                            <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                                                ${(bookSmallStyleResult.searchTitle)!'分类'} <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li> <a tabindex="-1" href="javascript:void(0)" data-field="smallStyleName">大类名称</a> </li>
                                                <li> <a tabindex="-1" href="javascript:void(0)" data-field="bigStyleName">小类名称</a> </li>
                                            </ul>
                                        </div>
                                        <div class="input-group">
                                            <input type="text" class="form-control" value="" id="keyword" name="keyword" placeholder="${(bookSmallStyleResult.keyWord)!'请输入关键字'}" />
                                            <span class="input-group-btn">
                                            <button class="btn btn-default" type="button" id="querySmallStyleByKey">搜索</button>
                                        </span>
                                        </div>
                                    </div>
                                </form>
                                <div class="toolbar-btn-action">
                                    <button type="button" class="btn btn-danger" data-target="#smallStyleDeleteAnyModal"><i class="mdi mdi-delete-empty">批量删除</i></button>
                                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#smallStyleInsertModal"><i class="mdi mdi-plus">新增</i></button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" id="check-all"><span></span>
                                                </label>
                                            </th>
                                            <th>序号</th>
                                            <th>图书小类名称</th>
                                            <th>图书大类名称</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                            <#if bookSmallStyleList??>
                                                <#list bookSmallStyleList as bookSmallStyle>
                                                    <tr>
                                                        <td>
                                                            <label class="lyear-checkbox checkbox-primary">
                                                                <input type="checkbox" name="smallStyleIds" value="${(bookSmallStyle.smallStyleId)!}">
                                                                <span></span>
                                                            </label>
                                                        </td>
                                                        <td style="display:none;">${bookSmallStyle.smallStyleId}</td>
                                                        <td>${bookSmallStyle_index!?number + 1}</td>
                                                        <td>${bookSmallStyle.smallStyleName}</td>
                                                        <td>${bookSmallStyle.bigStyleName}</td>
                                                        <td>
                                                            <div>
                                                                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#smallStyleUpdateModal"><i class="mdi mdi-pencil">修改</i></button>
                                                                &nbsp;
                                                                <button class="btn btn-danger example-p-4" name="deleteSmallStyle"><i class="mdi mdi-delete">删除</i></button>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </#list>
                                            </#if>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- 分页条码 -->
                                <ul class="pagination">
                                    <#if bookSmallStylePageInfo??>
                                        <!-- 页面大小 -->
                                        <#assign pageSize = (bookSmallStylePageInfo.pageSize)!?number />
                                        <!-- 当前页 -->
                                        <#assign pageNow = (bookSmallStylePageInfo.pageNum)!?number />
                                        <!-- 总页数 -->
                                        <#assign pageNum = (bookSmallStylePageInfo.pages)!?number />
                                        <!-- 查询条件标题 -->
                                        <#assign searchTitle = (bookSmallStyleResult.searchTitle)!'分类' />
                                        <!-- 关键字 -->
                                        <#assign keyWord = (bookSmallStyleResult.keyWord)! />
                                        <#if pageSize??>
                                            <!-- 首页图标 -->
                                            <#if pageNow == 1>
                                                <!-- 如果当前页为 1  禁用-->
                                                <li class="disabled"><a href="#!"><span>«</span></a></li>
                                                <!-- 如果当前页 不为 1 可用 -->
                                                <#else>
                                                <li>
                                                    <a href="/toPage?url=/yiyibook/manager/booksmallstyle&pageNow=1&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${pageNum}">
                                                        <span>«</span>
                                                    </a>
                                                </li>
                                            </#if>
                                            <!-- 页码图标 -->
                                            <#list 1..pageNum as record>
                                                <!-- 页码数 小于 5 -->
                                                <#if pageNum &lt;= 5>
                                                    <!-- 当前页 图标高亮 -->
                                                    <#if record == pageNow>
                                                        <li class="active"><a href="/toPage?url=/yiyibook/manager/booksmallstyle&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                        <!-- 非当前页 只显示页码 -->
                                                        <#else>
                                                        <li><a href="/toPage?url=/yiyibook/manager/booksmallstyle&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                    </#if>
                                                </#if>
                                                <!-- 页码数 大于 5 -->
                                                <#if pageNum &gt; 5>
                                                    <!-- 当 当前页小于 3 -->
                                                    <#if pageNow &lt;= 3>
                                                        <!-- 显示前五个页码 -->
                                                        <#if record &lt;= 5>
                                                            <#if record == pageNow>
                                                                <li class="active"><a href="/toPage?url=/yiyibook/manager/booksmallstyle&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                                <#else>
                                                                <li><a href="/toPage?url=/yiyibook/manager/booksmallstyle&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                            </#if>
                                                        </#if>
                                                        <!-- 当 当前页 大于 3 且 不是倒数第 5 个时 -->
                                                        <#elseif pageNow &gt; 3 && pageNow &lt; pageNum - 4>
                                                        <!-- 显示当前页 以及 前后 各两个页码 -->
                                                        <#if record &gt;= (pageNow - 2) && record &lt;= (pageNow + 2)>
                                                            <#if record == pageNow>
                                                                <li class="active"><a href="/toPage?url=/yiyibook/manager/booksmallstyle&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                                <#else>
                                                                <li><a href="/toPage?url=/yiyibook/manager/booksmallstyle&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                            </#if>
                                                        </#if>
                                                        <!-- 当 当前页 大于等于 倒数第 5 页时 -->
                                                        <#elseif pageNow &gt;= pageNum - 4>
                                                        <!-- 显示最后 5 页 -->
                                                        <#if record &gt;= pageNum - 4>
                                                            <#if record == pageNow>
                                                                <li class="active"><a href="/toPage?url=/yiyibook/manager/booksmallstyle&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                                <#else>
                                                                <li><a href="/toPage?url=/yiyibook/manager/booksmallstyle&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                            </#if>
                                                        </#if>
                                                    </#if>
                                                </#if>
                                            </#list>
                                            <!-- 尾页图标 -->
                                            <#if pageNow == pageNum>
                                                <!-- 如果当前页为 最后一页  禁用-->
                                                <li class="disabled"><a href="#!"><span>»</span></a></li>
                                                <!-- 如果当前页 不为 最后一页 可用 -->
                                                <#else>
                                                <li><a href="/toPage?url=/yiyibook/manager/booksmallstyle&pageNow=${pageNum}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${pageNum}"><span>»</span></a></li>
                                            </#if>
                                        </#if>
                                    </#if>
                                </ul>
                                <!-- 分页条码结尾 -->

                                <!-- 图书小类信息 新增模态框 -->
                                <div class="modal fade bs-example-modal-lg" id="smallStyleInsertModal" tabindex="-1" role="dialog" aria-labelledby="smallStyleInsertLabel">
                                    <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                <h4 class="modal-title" id="smallStyleInsertLabel">新增</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form class="form-horizontal" id="insertSmallStyleForm">
                                                    <div class="form-group" name="bigStyleIdSelect">
                                                        <input type="text" class="form-control input-lg" style="display: none" name="bigStyleId">
                                                        <label for="bigStyleId" class="col-lg-3 control-label">图书大类名称</label>
                                                        <div class="dropdown col-lg-8">
                                                            <button class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                -- 请选择 -- <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="bigStyleId">
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="smallStyleName" class="col-lg-3 control-label">图书小类名称</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="smallStyleNameInsert" name="smallStyleName" aria-describedby="basic-addon1">
                                                            <span class="input-group-addon" style="color: red;display: none" name="insertFlag" value="false" id="basic-addon1">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                <button type="button" id="insertSmallStyleSaveBtn" class="btn btn-primary">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 图书小类信息 新增模态框结束 -->

                                <!-- 图书小类信息 编辑模态框 -->
                                <div class="modal fade" id="smallStyleUpdateModal" tabindex="-1" role="dialog" aria-labelledby="smallStyleUpdateLabel">
                                    <div class="modal-dialog " role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                <h4 class="modal-title" id="smallStyleUpdateLabel">编辑</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form class="form-horizontal" id="updateSmallStyleForm">
                                                    <div style="display:none;">
                                                        <label for="smallStyleId" class="col-lg-3 control-label">图书小类id</label>
                                                        <input type="text" id="smallStyleIdUpdate" name="smallStyleId"/>
                                                    </div>
                                                    <div class="form-group" name="bigStyleIdSelect">
                                                        <input type="text" class="form-control input-lg" style="display: none" name="bigStyleId">
                                                        <label for="bigStyleId" class="col-lg-3 control-label">图书大类名称</label>
                                                        <div class="dropdown col-lg-8">
                                                            <button class="btn btn-default" id="bigStyleNameUpdate" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                -- 请选择 -- <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="bigStyleId">
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="smallStyleName" class="col-lg-3 control-label">图书小类名称</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="smallStyleNameUpdate" name="smallStyleName" aria-describedby="basic-addon1">
                                                            <span class="input-group-addon" style="color: red;display: none" name="updateFlag" value="false" id="basic-addon1">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-primary" id="smallStyleUpdateBtnSave">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div
                                <!-- 图书小类信息 编辑模态框结束 -->

                                <!-- 图书小类信息 批量删除模态框 -->
                                <div class="modal fade" id="smallStyleDeleteAnyModal" tabindex="-1" role="dialog" aria-labelledby="smallStyleDeleteLabel">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                <h4 class="modal-title" id="smallStyleDeleteLabel">批量删除</h4>
                                            </div>
                                            <div class="modal-body">
                                                <span style="display: none" id="deletesmallStyleIds"></span>
                                                确认要删除以下 [<span id="deletesmallStyleMsg" style="color:red;"></span>] 这些图书小类嘛？
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                                <button type="button" class="btn btn-danger" id="deleteAnySmallStyleSubmit">删除</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 图书小类信息 删除模态框结束 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/perfect-scrollbar.min.js"></script>

<!--消息提示-->
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<!--对话框-->
<script src="/static/js/jconfirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="/static/js/main.min.js"></script>

<script type="text/javascript">
    // 图书大类名称 下拉列表 函数
    function bigStyleNameSelect(obj){
        var valMsg = $(obj).html();
        var val = $(obj).attr('value');
        $(obj).parent().parent().parent().prev().prev().val(val);
        $(obj).parent().parent().prev().html(valMsg + ' <span class="caret"></span>');
    }

    $(function(){
        $('.search-bar .dropdown-menu a').click(function() {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });

        // 查询框 - 按钮 点击事件
        $('#querySmallStyleByKey').click(function (){
            // 查询关键字
            var keyWord = $('#keyword').val();
            // 关键字标题按钮内容
            var searchTitleBtn = $('#search-btn').html();
            // 获取必须的内容 并 去空格
            var searchTitle = searchTitleBtn.substr(0,searchTitleBtn.indexOf('<')).trim();
            // 条件查询 请求后台
            window.location.replace("/toPage?url=/yiyibook/manager/booksmallstyle&searchTitle="
                                + searchTitle + "&keyWord=" + keyWord);
        });

        // 图书大类名称 下拉列表 点击事件
        $('div[name="bigStyleIdSelect"]').click(function () {
            console.log(111);
            $.ajax({
                type: "POST",
                url: "/big/selectAll",
                dataType: "JSON",
                success: function(data){
                    if(data != null){
                        $('ul[aria-labelledby="bigStyleId"]').html("");
                        var bookBigStyleList = data.extend.bookBigStyleList;
                        $(bookBigStyleList).each(function (index, bookBigStyle) {
                            var liDom = $('<li></li>').append($('<a></a>').attr({"href":"#","value":bookBigStyle.bigStyleId,"onclick":"bigStyleNameSelect(this)"})
                                .html(bookBigStyle.bigStyleName));
                            if(index == 0){
                                $(this).children("input").eq(0).val(bookBigStyle.bigStyleId);
                                $(this).children("button").eq(0).html(bookBigStyle.bigStyleName + ' <span class="caret"></span>');
                            }
                            $('ul[aria-labelledby="bigStyleId"]').append(liDom);
                        });
                    }
                },
                error: function(data){
                    console.log(data);
                }
            });
        });

        // 添加图书小类 按钮保存 点击事件
        $('#insertSmallStyleSaveBtn').click(function () {
            var flagArray = $("span[name='insertFlag']");
            for (var i = 0; i < flagArray.length; i++) {
                var checkSpan = flagArray[i];
                // 获取 验证标识 的值
                var checkVal = $(checkSpan).attr('value');
                if(checkVal == "false"){
                    console.log("校验失败！");
                    $(checkSpan).prev().blur();
                    break;
                }
            }
            if(i == flagArray.length){
                console.log("校验成功！");
                var form = $('#insertSmallStyleForm').serialize();
                lightyear.loading('show');
                $.ajax({
                    type: "POST",
                    url: "/small/insert",
                    data: form,
                    dataType: "JSON",
                    success: function(data){
                        lightyear.loading('hide');
                        // 请求编码 100 为成功 200 为失败
                        var code = data.code;
                        if(code == 100){
                            lightyear.notify('添加成功，页面即将自动刷新', 'success', 1000);
                            setTimeout(function() {
                                window.location.reload();
                            }, 1e3)
                        }else if(code == 200){
                            lightyear.notify('添加失败' + data.extend.errorMsg, 'danger', 1000);
                        }
                    },
                    error: function(data){
                        lightyear.loading('hide');
                        lightyear.notify('添加失败，请重试或联系技术人员', 'danger', 1000);
                        console.log(data);
                    }
                });
            }
        });

        // 添加图书小类 验证图书小类信息
        // 1、图书小类名称 可以是 数字，字母，下划线组成 长度 [4,16]
        var regSmallStyleName = /^[\u4E00-\u9FA5]{2,6}$/;
        var objSmallStyleName = $('#smallStyleNameInsert');
        var msgSmallStyleName = "图书小类必须由2-6个中文组成！";
        checkEvent(regSmallStyleName, objSmallStyleName, msgSmallStyleName);

        // 编辑按钮点击事件
        $('button[data-target="#smallStyleUpdateModal"]').click(function () {
            var bookSmallStyleId = $(this).parent().parent().parent().children('td').eq(1).html();
            console.log(bookSmallStyleId);
            $.ajax({
                type: "GET",
                url: "/small/selectOne",
                data: { "smallStyleId" : bookSmallStyleId },
                dataType: "JSON",
                success: function(data){
                    if(data != null){
                        console.log(data);
                        $('#smallStyleIdUpdate').val(data.smallStyleId);
                        $('#smallStyleIdUpdate').parent().next().children("input").eq(0).val(data.bigStyleId);
                        $('#bigStyleNameUpdate').html(data.bigStyleName + ' <span class="caret"></span>');
                        $('#smallStyleNameUpdate').val(data.smallStyleName);
                    }
                },
                error: function(data){
                    console.log(data);
                }
            });
        });

        // 编辑图书小类 验证图书小类信息
        // 1、图书小类名称 可以是 数字，字母，下划线组成 长度 [4,16]
        var objSmallStyleNameUpdate = $('#smallStyleNameUpdate');
        checkEvent(regSmallStyleName, objSmallStyleNameUpdate, msgSmallStyleName);

        // 编辑保存按钮点击事件
        $('#smallStyleUpdateBtnSave').click(function () {
            var flagArray = $("span[name='updateFlag']");
            for (var i = 0; i < flagArray.length; i++) {
                var checkSpan = flagArray[i];
                // 获取 验证标识 的值
                var checkVal = $(checkSpan).attr('value');
                if(checkVal == "false"){
                    console.log("校验失败！");
                    $(checkSpan).prev().blur();
                    break;
                }
            }
            if(i == flagArray.length){
                console.log("校验成功！");
                var form = $('#updateSmallStyleForm').serialize();
                lightyear.loading('show');
                $.ajax({
                    type: "POST",
                    url: "/small/update",
                    data: form,
                    dataType: "JSON",
                    success: function(data){
                        lightyear.loading('hide');
                        // 请求编码 100 为成功 200 为失败
                        var code = data.code;
                        if(code == 100){
                            lightyear.notify('修改成功，页面即将自动刷新', 'success', 1000);
                            setTimeout(function() {
                                window.location.reload();
                            }, 1e3)
                        }else if(code == 200){
                            lightyear.notify('修改失败' + data.extend.errorMsg, 'danger', 1000);
                        }
                    },
                    error: function(data){
                        lightyear.loading('hide');
                        lightyear.notify('修改失败，请重试或联系技术人员', 'danger', 1000);
                        console.log(data);
                    }
                });
            }

        });

        // 删除按钮点击事件
        $('button[name="deleteSmallStyle"]').click(function () {
            var smallStyleId = $(this).parent().parent().parent().children('td').eq(1).html();
            var smallStyleName = $(this).parent().parent().parent().children('td').eq(3).html();
            $.confirm({
                title: '删除提示',
                content: '确认删除 图书小类 <span style="color: red;">' + smallStyleName + '</span> ？',
                type: 'red',
                typeAnimated: true,
                buttons: {
                    tryAgain: {
                        text: '确认',
                        btnClass: 'btn-red',
                        action: function(){
                            lightyear.loading('show');
                            $.ajax({
                                type: "GET",
                                url: "/small/delete",
                                data: { "smallStyleId" : smallStyleId },
                                dataType: "JSON",
                                success: function(data){
                                    lightyear.loading('hide');
                                    // 请求编码 100 为成功 200 为失败
                                    var code = data.code;
                                    if(code == 100){
                                        lightyear.notify('删除成功，页面即将自动刷新', 'success', 1000);
                                        setTimeout(function() {
                                            window.location.reload();
                                        }, 1e3)
                                    }else if(code == 200){
                                        lightyear.notify('删除失败' + data.extend.errorMsg, 'danger', 1000);
                                    }
                                },
                                error: function(data){
                                    lightyear.loading('hide');
                                    lightyear.notify('删除失败，请重试或联系技术人员', 'danger', 1000);
                                    console.log(data);
                                }
                            });
                        }
                    },
                    close: {
                        text: '取消'
                    }
                }
            });
        });

        // 批量删除按钮点击事件
        $('button[data-target="#smallStyleDeleteAnyModal"]').click(function () {
            // 要被删除的 图书小类id 数组
            var idsArr = new Array();
            // 要被删除的 图书小类名称 数组
            var nameArr = new Array();
            var j = 0;
            var checkBoxArr = $('input[name="smallStyleIds"]');
            for (var i = 0; i < checkBoxArr.length; i++) {
                var checked = $(checkBoxArr[i]).attr("checked");
                var smallStyleId = $(checkBoxArr[i]).attr("value");
                var smallStyleName = $(checkBoxArr[i]).parent().parent().parent().children('td').eq(3).html();
                if(checked == "checked"){
                    idsArr[j] = smallStyleId;
                    nameArr[j] = smallStyleName;
                    j++;
                }
            }

            if(idsArr.length == 0){
                console.log(idsArr.length);
                $('#smallStyleDeleteAnyModal').modal('hide');
                $.alert({
                    title: '提示',
                    content: '请先勾选您要删除的图书小类！',
                    type: 'red',
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'btn-primary',
                        }
                    }
                });
            }else if(idsArr.length > 0){
                console.log(idsArr.length);
                $('#smallStyleDeleteAnyModal').modal('show');
                var smallStyleNames = "";
                var smallStyleIds = "";
                for (var i = 0; i < nameArr.length; i++) {
                    if(i == nameArr.length - 1){
                        smallStyleNames = smallStyleNames + nameArr[i];
                        smallStyleIds = smallStyleIds + idsArr[i];
                    }else{
                        smallStyleNames = smallStyleNames + nameArr[i] + ", ";
                        smallStyleIds = smallStyleIds + idsArr[i] + ", ";
                    }
                }
                $('#deletesmallStyleMsg').html(smallStyleNames);
                $('#deletesmallStyleIds').html(smallStyleIds);
            }
        });

        // 批量删除按钮 确认 点击事件
        $('#deleteAnySmallStyleSubmit').click(function () {
            var smallStyleIds = $('#deletesmallStyleIds').html();
            lightyear.loading('show');
            $.ajax({
                type: "GET",
                url: "/small/deleteAny",
                data: { "smallStyleIds" : smallStyleIds },
                dataType: "JSON",
                success: function(data){
                    lightyear.loading('hide');
                    // 请求编码 100 为成功 200 为失败
                    var code = data.code;
                    if(code == 100){
                        lightyear.notify('批量删除成功，页面即将自动刷新', 'success', 1000);
                        setTimeout(function() {
                            window.location.reload();
                        }, 1e3)
                    }else if(code == 200){
                        lightyear.notify('批量删除失败' + data.extend.errorMsg, 'danger', 1000);
                    }
                },
                error: function(data){
                    lightyear.loading('hide');
                    lightyear.notify('批量删除失败，请重试或联系技术人员', 'danger', 1000);
                    console.log(data);
                }
            });

        })

        // 复选框点击事件
        $('input[name="smallStyleIds"]').click(function () {
            var checkedFlag = $(this).attr("checked");
            if(checkedFlag == "checked"){
                $(this).attr("checked", false);
            }else{
                $(this).attr("checked", true);
            }
        });

        // 复选框全选事件
        $('#check-all').click(function () {
            var checkedFlag = $(this).attr("checked");
            if(checkedFlag == "checked"){
                $(this).attr("checked", false);
                $('input[name="smallStyleIds"]').attr("checked", false);
            }else{
                $(this).attr("checked", true);
                $('input[name="smallStyleIds"]').attr("checked", true);
            }
        });

        /**
         * 校验事件函数 (不含确认密码)
         * @param reg 正则表达式
         * @param obj 校验的 input 元素
         * @param msg 提示信息
         */
        function checkEvent(reg, obj, msg){
            obj.focus(function () {
                $(this).parent().parent().next().hide();
            }).blur(function () {
                if(!reg.test(obj.val())){
                    // 显示错误提示
                    obj.parent().parent().next().show();
                    obj.parent().parent().next().html(msg);
                    // 显示错误标识
                    obj.next().show();
                    obj.next().html('×');
                    obj.next().css('color','red');
                    obj.next().attr('value','false');
                }else{
                    obj.next().show();
                    obj.next().attr('value','true');
                    obj.next().html('√');
                    obj.next().css('color','green');
                }
            });
        }
    });
</script>
</body>
</html>